<template>
	<view>
	<scroll-view scroll-y="true" style="height: 100vh;">
		<view class="headinfo">
			<swiper class="swiperstyle" autoplay="true">
				<swiper-item v-for="(item,index) in shopinfo.thumb" :key="index">
					<image :src="item" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
			<view class="prize">
				<image src="../../static/image/money-1.png" mode="aspectFit"></image>
				<view class="item-info">
					{{shopinfo.amount}}金币+{{shopinfo.price}}元<text>{{shopinfo.actual_price}}</text>
				</view>
			</view>
		</view>
		<!--商品标题-->
		<view class="shopinfos">
			<view class="shop-titles">
				{{shopinfo.title}}<text>包邮</text>
			</view>
			<view class="kucun">剩余{{shopinfo.surplus}}件</view>
		</view>
		<!--address物流地址-->
		<view  class="address" @click="gotoaddr">
			<view class="addresslimit">
				送至 {{address}}
			</view>
			<view>›</view>
		</view>

		<!--兑换说明-->
		<view class="prodetail">
			<view class="dhshuom">兑换说明</view>
			<view class="contents">
				<jyf-parser :html="shopinfo.details" :selectable="true"></jyf-parser>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
	</scroll-view>
	<!--立即兑换-->
	<view class="duihuan" @click="payorder">
		<view class="huan-button">立即兑换</view>
	</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				lock:false,
				address: '请填写收货地址',
				shopinfo:'',//商品详情
			}
		},
		onShow() {
			
			this.wxaddress()
		},
		onLoad(option) {
			if (option.shopid) {
				this.getinfo(option.shopid);
			}
		},
		methods: {
			gotoaddr(){
				//判断是否需要登陆
				if(this.$Logintip()){
					this.$Userlogin()
					return
				}
				uni.navigateTo({
					url:"/pages/address/addresslist"
				})
			},
			
			//添加收货地址
			wxaddress(){
				let ainfo = uni.getStorageSync('address');
				if(ainfo){
					this.address = ainfo.realname + ',' + ainfo.phone + ',' + ainfo.area + ainfo.address;
				}
			},
			
			payorder(){
				//判断是否需要登陆
				if(this.$Logintip()){
					this.$Userlogin()
					return
				}
				if(this.lock){
					return
				}
				let addrinfo = uni.getStorageSync('address');
				if(!addrinfo){
					this.$ShowMsg('请先选择下单地址!');
					return;
				}
				this.lock = true;
				let _that = this;
				_that.$HttRequest({
					url: '/looting/exchange',
					param: {
						id: _that.shopinfo.id,
						addrId:addrinfo.id
					}
				},'GET',true).then(res => {
				
					console.log(res);
					if (res.status === 10000) {
						if(res.data.pay){
							console.log('请付款！');
							uni.requestPayment({
								provider:"wxpay",
								orderInfo:res.data.pay,
								success() {
									//兑换后的积分存入内存中
									_that.$changefield('integral', res.data.integral);
									_that.$ShowMsg('恭喜商品兑换成功！')
									setTimeout(()=>{
										uni.redirectTo({
											url:"/pages/member/order"
										})
									},2000)
									_that.lock = false;
								},fail(error) {
									_that.$ShowMsg('订单已取消，奖品兑换失败！')
									setTimeout(()=>{
										uni.redirectTo({
											url:"/pages/member/order"
										})
									},2000)
									_that.lock = false;
								}
							})
							
						}else{
							//兑换后的积分存入内存中
							_that.$changefield('integral', res.data.integral);
							_that.$ShowMsg('恭喜商品兑换成功！')
							setTimeout(()=>{
								uni.redirectTo({
									url:"/pages/member/order"
								})
							},2000)
								_that.lock = false;
						}
					} else {
						_that.$ShowMsg(res.message);
						_that.lock = false;
					}
				}).catch(error => {
					//异常错误
					_that.$ShowMsg('statusCode：' + error.errMsg);
				});
			},
			
			//获取商品详情
			getinfo(id) {
				this.$HttRequest({
					url: '/looting/details',
					param: {
						id: id
					}
				}).then(res => {
					if (res.status === 10000) {
						this.shopinfo = res.data;
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch(error => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.addresslimit {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 680rpx;
	}

	.prodetail {
		flex: 1;
		padding: 40rpx;
		line-height: 45rpx;
		margin-top: 20rpx;
		background-color: #fff;

		.dhshuom {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 25rpx;
		}

		.contents {
			font-size: 25rpx;
			letter-spacing: 1rpx;
		}
	}

	.address {
		background-color: #fff;
		flex: 1;
		height: 80rpx;
		font-size: 28rpx;
		color: #afafaf;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
	}

	.shopinfos {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;

		height: 80rpx;
		font-size: 28rpx;
		flex: 1;
		border: 1rpx solid #eaeaea;
		padding: 0 20rpx;

		.kucun {
			color: #808080;
			font-size: 24rpx;

		}

		.shop-titles {

			display: flex;
			justify-content: center;
			align-items: center;

			text {
				background-color: #bfd7f9;
				width: 65rpx;
				height: 30rpx;
				justify-content: center;
				align-items: center;
				margin-left: 15rpx;
				font-size: 22rpx;
				border-radius: 8rpx;
				display: flex;
				color: $uni-botton-primary;
			}

		}
	}

	.prize {
		bottom: 0;
		width: 100vw;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: absolute;
		height: 95rpx;
		background-color: #000;
		opacity: 0.8;

		image {
			width: 35rpx;
			height: 35rpx;
			margin: 0 25rpx;
		}

		.item-info {
			color: #fff;
			font-size: 28rpx;
			font-weight: bold;

			text {
				margin-left: 20rpx;
				text-decoration: line-through;
				opacity: 0.5;
				font-weight: normal;
				font-size: 25rpx;
			}
		}
	}

	.headinfo {
		position: relative;
	}

	.duihuan {
		background-color: #fff;
		border-top: 1rpx solid #d7d7d7;
		display: flex;
		width: 100vw;
		position: fixed;

		align-items: center;
		justify-content: center;
		bottom: 0;

		.huan-button {
			background-color: $uni-botton-primary;
			width: 92%;
			height: 85rpx;
			border-radius: 40rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			margin: 20rpx 0;
		}
	}

	.swiperstyle {
		width: 750rpx;
		height: 750rpx;

		image {
			width: 750rpx;
			height: 750rpx;

		}
	}
</style>
